<template>
  <div class="">
    <validator name='change'>
     <modal :show.sync="show" v-ref:modal backdrop="false">
       <header slot="modal-header" class="modal-header">
         <button type="button" class="close" @click="closeChange()"><span>&times;</span></button>
         <h4 class="modal-title">修改权限验证</h4>
       </header>
       <article slot="modal-body" class="modal-body" v-if="!changeOverdue">
         <div class="form-input-group">
           <label for="f_totalcost" class="control-label">用户名:</label>
           <input class="form-control"  type="text" v-model="username">
         </div>
         <div class="form-input-group" style="margin-top: 10px;">
           <label for="f_totalcost" class="control-label">密码:</label>
           <input class="form-control"  type="text" v-model="password">
         </div>
       </article>
       <article slot="modal-body" class="modal-body" v-if="changeOverdue">
         <div class="form-input-group">
           <label for="f_totalcost" class="control-label">输入内容:</label>
           <input class="form-control"  type="text" v-model="changeValue">
         </div>
         <div class="form-input-group" :class="[$change.change_reason.required ? 'has-error' : '']" style="margin-top: 10px;">
           <label for="f_totalcost" class="control-label">变更原因:</label>
           <input class="form-control"  type="text" v-model="changeReason"  v-validate:change_reason='{required: true }'>
         </div>
       </article>

       <footer slot="modal-footer" class="modal-footer">
         <button v-show="show" type="button" class="btn btn-default" @click='closeChange()' v-if="!changeOverdue">取消</button>
         <button v-show="show" type="button" class="btn btn-success" @click='provingConfirm(username, password)' :disabled="!$change.valid">确认</button>
       </footer>
     </modal>
   </validator>
  </div>
</template>

<script>
export default {
  title: '身份验证',
  data () {
    return {
      username: '',
      password: '',
      changeValue: '',
      changeReason: '',
      changeOverdue: false
    }
  },
  props: {
    show: {
      twoWay: true,
      default: false
    }
  },
  methods: {
    // 修改滞纳金是验证权限
    provingConfirm (name, psw) {
      // 如果已经经过验证了，那就直接消失即可，如果没有验证，验证身份
      if (this.changeOverdue) {
        this.$dispatch('change-con', this.changeValue, this.changeReason)
        // 将用户名密码清空，将弹框隐藏
        this.username = ''
        this.password = ''
        this.changeValue = ''
        this.changeReason = ''
        this.show = false
        this.changeOverdue = false
      } else {
        let path = `/rs/user/${name}/${psw}/营收系统`
        this.$http({url: path, method: 'GET'}).then((ret) => {
          if (ret.data.roles.split(',').includes('4275417') || ret.data.roles.split(',').includes('6667941')) {
            this.changeOverdue = true
          } else { // 如果没有权限
            this.$showMessage('用户没有权限修改，请联系管理员')
          }
        }).catch((ret) => {
          let msg = '用户名或密码错误，请核对后重新登录'
          if (ret.status === 0) {
            msg = '服务连接错误，请确认服务状态'
          }
          this.$showMessage(msg).then(() => {
            this.username = ''
            this.password = ''
          })
        })
      }
    },
    closeChange () {
      this.show = false
    }
  }
}
</script>
